<template>
  <div class="app-container">
    <h4>基本信息</h4>
    <div class="change">
      <p>
        <span>资产类别</span>
        <input v-model="tempData.propertyType" type="text" />
      </p>

      <p>
        <span>资产名称</span>
        <input v-model="tempData.propertyName" type="text" placeholder="请输入资产名称" />
      </p>

      <p>
        <span>资产规格</span>
        <input v-model="tempData.propertyGuige" type="text" placeholder="请输入资产规格" />
      </p>

      <p>
        <span>设备数量</span>
        <input v-model="tempData.propertyNums" type="text" placeholder="请输入设备数量" />
      </p>

      <p>
        <span>金额</span>
        <input v-model="tempData.propertyJine" type="text" placeholder="请输入资产规格" />
      </p>

      <p>
        <span>资产SN码</span>
        <input v-model="tempData.propertySn" type="text" placeholder="请输入资产SN码" />
      </p>

      <p>
        <span>购买时间</span>
        <input v-model="tempData.purchaseTime" type="text" />
      </p>

      <p>
        <span>来源</span>
        <input v-model="tempData.sourceOf" type="text" />
      </p>

      <p>
        <span>存放地</span>
        <input v-model="tempData.storeAreas" type="text" />
      </p>

      <p>
        <span>地区</span>
        <input v-model="tempData.areas" type="text" />
      </p>

      <p>
        <span>所属公司</span>
        <input v-model="tempData.belongCompany" type="text" />
      </p>

      <p>
        <span>使用公司</span>
        <input v-model="tempData.companys" type="text" />
      </p>

      <p>
        <span>使用部门</span>
        <input v-model="tempData.departments" type="text" />
      </p>

      <p>
        <span>使用人</span>
        <input v-model="tempData.usePerson" type="text" placeholder="请输入使用人" />
      </p>

      <p>
        <span>管理员</span>
        <input v-model="tempData.managerPerson" type="text" placeholder="请输入管理员" />
      </p>

      <p>
        <span>图片</span>
        <el-upload class="avatar-uploader" action :show-file-list="false">
          <img v-if="tempData.imgurl" :src="tempData.imgurl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </p>
    </div>

    <h4>维保信息</h4>
    <div class="change">
      <p>
        <span>是否有备用</span>
        <input v-model="tempData.spareIs" type="text" />
        <!--<el-select v-model="tempData.spareIs" placeholder="请选择是否有备用" class="userselect">
          <el-option
            v-for="item in beiyong"
            :key="item.id"
            :label="item.num"
            :value="item.num"
          ></el-option>
        </el-select>-->
      </p>

      <p>
        <span>使用期限</span>
        <input v-model="tempData.serviceLife" type="text" />
        <!--<el-select v-model="tempData.serviceLife" placeholder="请选择使用期限" class="userselect">
          <el-option
            v-for="item in shiyongqixian"
            :key="item.id"
            :label="item.num"
            :value="item.num"
          ></el-option>
        </el-select>-->
      </p>

      <p>
        <span>巡检周期</span>
        <input v-model="tempData.maintainCycle" type="text" />
        <!--<el-select v-model="tempData.maintainCycle" placeholder="请选择巡检周期" class="userselect">
          <el-option
            v-for="item in weixiuzhouqi"
            :key="item.id"
            :label="item.num"
            :value="item.num"
          ></el-option>
        </el-select>-->
      </p>

      <p>
        <span>供应商</span>
        <input v-model="tempData.suppliers" type="text" placeholder="请输入供应商" />
      </p>
    </div>
    <div class="submits" v-if="!islook">
      <div class="nosave" @click="nosaveOrder">返回</div>
    </div>
  </div>
</template>
<script>
import { getUser, getBumen, getUserFiles } from "@/api/people";
import { getGongying, addCaigou, updateCaigouOrPro } from "@/api/caigou";
// import { getCangku,productOneClass,withIdGetPro } from '@/api/cangku'
import { inStock } from "@/api/cangku";
export default {
  data() {
    return {
      radio: "1",
      total: 1,
      value: "",
      tableData: [],
      oneClassify: [], //一级分类
      twoClassify: [],
      tempData: {
        areas: "", //地区
        belongCompany: "", //所属公司
        companys: "", //使用公司
        creatorPerson: "", //创建人
        departments: "", //使用部门
        erweima: "", // 二维码
        imgurl: "", //图片地址
        maintainCycle: "", //维修周期
        managerPerson: "", //管理员
        parentId: "", //父类id
        propertyGuige: "", //资产规格
        propertyJine: "", //金额
        propertyName: "", //资产名称
        propertyNums: "", //数量
        propertySn: "", //资产SN码
        propertyType: "", //资产类别
        purchaseTime: "", //购买时间
        serviceLife: "", //使用期限
        sourceOf: "", //来源
        spareIs: "", //是否有备用品
        status: "", //状态
        storeAreas: "", //存放地址
        suppliers: "", //供应商
        usePerson: "", //使用人
      },

      fileNum: [
        {
          filename: "",
          filePath: "",
        },
      ], //需要上传的文件个数
      ifydata: [
        {
          id: 0,
          departments: "全部",
          value: "",
        },
      ], //部门列表
      bumen: "", //部门值
      buyerList: {},
      gongying: [], //供应商管理
      gys: "", //供应商选择值
      proDeail: [], //商品列表
      peopleData: [], //人员列表
      currentRow: null,
      gyShow: false, //供应商弹窗状态
      buyerShow: false, //采购员弹窗状态
      addProShow: false, //商品信息弹窗
      proData: [],
      writOradd: 0, //0新增，1编辑
      islook: false,
    };
  },
  mounted() {
    this.tempData = JSON.parse(this.$route.params.options);
  },
  methods: {
    goPrev(page) {
      console.log(page);
    },
    goNext(page) {
      console.log(page);
    },
    // 取消新增
    nosaveOrder() {
      console.log("取消");
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.popup {
  padding: 0 20px;
}
.product {
  display: flex;
  .pro-l {
    width: 200px;
  }
  .pro-r {
    flex: 1;
    overflow: hidden;
    /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: rgba(24, 160, 94, 0.2);
    }
    /deep/.el-table tr {
      cursor: pointer;
    }
    /deep/.el-table__body tr.current-row > td {
      background-color: rgba(24, 160, 94, 0.4);
    }
  }
}
.files {
  display: flex;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-top: 20px;
  overflow: hidden;
  padding: 20px;
}
.files-btm .btn-prev:after {
  content: "上一页";
}
.files-btm .btn-next:before {
  content: "下一页";
}
.files-btm .btn-prev,
.files-btm .btn-next {
  width: 65px;
}
.files-left {
  width: 160px;
  margin-right: 20px;
  /deep/.el-menu {
    border-right: none;
  }
  /deep/.el-menu-item {
    height: 35px;
    line-height: 35px;
    margin-bottom: 8px;
  }
  /deep/.el-menu-item.is-active {
    color: #fff;
    border-radius: 5px;
    background: rgba(24, 160, 94, 0.8);
  }
}
.files-right {
  flex: 1;
  overflow: hidden;
}
.files-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  // margin-top: 20px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 45px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.avatar {
  width: 30px;
  height: 30px;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.inps {
  width: 95%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: rgba(0, 0, 0, 0.8);
}
.inps-active {
  width: 95%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: rgba(24, 160, 94, 0.2);
  border: none;
  color: rgba(0, 0, 0, 0.8);
}
h4 {
  background: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}
.change {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-top: -5px;
  > p {
    width: 25%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      // width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.submits {
  display: flex;
  padding: 15px 20px;
  justify-content: flex-end;
  align-items: center;
  > div {
    width: 80px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    margin-left: 30px;
    cursor: pointer;
  }

  .nosave {
    background: #2196f3;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #999 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.fileup {
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 0 0 8px 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  // justify-content: space-between;
  // align-items: center;
  flex-direction: column;
  // justify-content: center;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      // width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    /deep/.el-upload-dragger {
      width: 100%;
      height: 100px;
    }
    /deep/.el-upload-dragger .el-icon-upload {
      font-size: 60px;
      color: #c0c4cc;
      margin: 0;
      line-height: 1;
      width: 100%;
    }
    /deep/.el-upload {
      width: 100%;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: inline-block;
      width: 100px;
      text-align: right;
      padding-right: 15px;
      &:last-child {
        text-align: left;
      }
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
    > strong {
      display: inline-block;
      padding-right: 100px;
      font-weight: 100;
      font-size: 14px;
      &:last-child {
        cursor: pointer;
        color: #13ce66;
        font-weight: 600;
      }
    }
    > div {
      width: inherit;
      flex: 1;
    }
  }
}
@media screen and (max-width: 1400px) {
  .change > p {
    width: 33%;
  }
}
</style>